<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<!--<link rel="stylesheet" href="css/media.css" />-->
		<link rel="stylesheet" href="css/style.css" />
	</head>

	<body class="overhid">
		<div class="container">
			<ul class="applist">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script type="text/javascript" src="js/mui.min.js"></script>
		<script>
			mui.init();
			mui.ready(function() {
				//小左边滑动
				var startY, moveY, movebox = document.querySelector('.applist');
				
				//触摸开始
				function boxTouchStart(e) {
//					console.log(e)
					var touch = e.touches[0]; //获取触摸对象
					console.log('1111')
					console.log(touch.screenY)
					startY = touch.pageY; //获取触摸坐标
				}
				//触摸移动
				function boxTouchMove(e) {
					
					var touch = e.touches[0];
					console.log(touch.screenY)
					moveY = touch.pageY - startY; //手指水平方向移动的距离
				}
				//触摸结束
				function boxTouchEnd(e) {
					console.log(e)
//					var touch = e.touches[0];
//					console.log(touch.pageY)
					var height=mui('.applist')[0].offsetHeight/2;
					moveDir = moveY < 0 ? true : false; //滑动方向大于0表示向左滑动，小于0表示向右滑动
//					alert(moveY);
//					alert(height)
					//手指向上滑动
					if(moveDir) {
						if(-moveY>height){
							console.log(1)
						}
//						var index = $(this).find("div.active").index();
						//第一个是1的时候
						

						//手指向下滑动
					} else {
//						var index = $(this).find("div.active").index();
						//第一个是4的时候
						
					}
				}

				//滑动对象事件绑定
				movebox.addEventListener("touchstart", boxTouchStart, false);
				movebox.addEventListener("touchmove", boxTouchMove, false);
				movebox.addEventListener("touchend", boxTouchEnd, false);
			})
		</script>
	</body>

</html>